<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户管理</title>
<link rel="stylesheet" href="../layui/css/layui.css">
<link rel="stylesheet" href="../layer/theme/default/layer.css">
<script type="text/javascript" src="../layer/layer.js"></script>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script src="../layui/layui.all.js"></script>
<script src="../layer/mobile/layer.js"></script>
<style type="text/css">
.layui-table-cell laytable-cell-1-Clast_date{
	text-align: center;
	color:black;
}
.layui-table-box{
	width:100%;
}
</style>

</head>
<body style="background:#EEEEEE">
<div style="padding:10px;">
<button id="toadd" type="button" class="layui-btn layui-btn-normal" style="font-size:14px;margin-left:20px;"><i class="layui-icon">&#xe654;</i>添加用户</button>
<button id="f5" type="button" class="layui-btn layui-btn-primary" style="font-size:14px;margin-left:20px;"><i class="layui-icon">&#xe9aa;</i></button>
<span style="color:#909090">（未显示是数据接口异常，请尝试刷新）</span>
</div>
<div id="tab"  style="position:absolute;width:180px;height:100px;top:10%;right:0px;background:black;color:write;display:none" >
<table style="width:180px;height:100px">
	<tr><td>账户名</td><td>密码</td><td>邮箱</td></tr>
	<tr><td></td><td></td><td></td></tr>
</table>

</div>
<table style="width:100%" class="layui-hide" id="test" lay-filter="demo"></table>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
 

<script src="../layui/layui.all.js"></script>
<script src="../layui/lay/modules/layer.js"></script>
<script>
layui.config({
  version: '1534457846312' //为了更新 js 缓存，可忽略
});
 
layui.use(['laypage', 'layer', 'table', 'upload'], function(){
  var laypage = layui.laypage //分页
  ,layer = layui.layer //弹层
  ,table = layui.table //表格
  ,upload = layui.upload //上传

  
  //执行一个 table 实例
  table.render({
    elem: '#test'
   	,method:'get'
	,dataType:'json'
    ,url: 'a.usershow' //数据接口
    ,limit:10
    ,page: true //开启分页
    ,cols: [[ //表头
    {checkbox: true, fixed: true},
      {field: 'Cser_num', title: '序号', width:80, sort: true, fixed: 'left'},
      {field: 'Cid', title: 'ID', width:100, sort: true},
      {field: 'Cname', title: '账户', width:100},
      {field: 'Cpwd', title: '密码', width:120} ,
      {field: 'Csex', title: '性别', width: 60},
      {field: 'Clenvel', title: '等级', width: 70},
      {field: 'Cbirthday', title: '生日', width: 120},
      {field: 'Cphone', title: '联系电话', width: 120},
      {field: 'Cemail', title: '邮箱', width: 170},
      {field: 'Cregis_date', title: '注册时间', width: 120, sort: true},
      {field: 'Clast_date', title: '上次登录时间', width: 120},
      {field: 'Cmember', title: '是否会员', width: 80},
      {field: 'Ctotal', title: '积分', width: 100},
      {fixed: 'right',title:"操作", width: 200, align:'center', toolbar: '#barDemo'}
    ]]
  });
  
  //监听工具条
  table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'detail'){} 
    else if(layEvent === 'del'){
		layer.confirm('真的要删除么', function(index){
			$.ajax({
	    		type: "get",
	    		url: "a.userdelete",
	    		dataType: 'json',
	    		data: {"userid": data.Cid},
				success:function(data){
					alert(data);
				}
			})
	        obj.del(); //删除对应行（tr）的DOM结构
	        layer.close(index);
	        //向服务端发送删除指令
	      });
    } else if(layEvent === 'edit'){
    	layer.open({
   			type: 2,
   			area: ['360px', '460px'],
   			title:"输入修改的信息",
   		  	shadeClose: true,
   		 	maxmin: true,
   		 	limit:10,
    		content: 'userupd.jsp?cid='+data.Cid+'&cname='+data.Cname+'&cpwd='+data.Cpwd+'&csex='+data.Csex+'&cbir='+data.Cbirthday+'&cemail='+data.Cemail+'&cphone='+data.Cphone+'&ctotal='+data.Ctotal+'' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
    		}); 
    }
  });

  
  //分页
  laypage.render({
    elem: 'pageDemo' //分页容器的id
    ,limit:10
    ,skin: '#1E9FFF' //自定义选中色值
    //,skip: true //开启跳页
    ,jump: function(obj, first){
      if(!first){
        layer.msg('第'+ obj.curr +'页');
      }
    }
  });
  
  //上传
  upload.render({
    elem: '#uploadDemo'
    ,url: '' //上传接口
    ,done: function(res){
      console.log(res)
    }
  });
  

});
</script>
<script type="text/javascript">
	$(function(){
		$("#toadd").click(function(){
			location.href="useradd.html";
		})
		$("#f5").click(function(){
			layer.msg("dasdas");
			location.href="usermanage.html";
		})
	})
</script>
</body>
</html>        
                